<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统管理界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/style.css">
    <style>
        body {
            background-color: #f8f9fa; /* 浅灰色背景 */
        }

        .sidebar {
            min-height: 100vh;
            background-color: #343a40;
            padding-top: 20px;
        }

        .sidebar a {
            color: white;
            display: block;
            padding: 15px;
            text-decoration: none;
        }

        .sidebar a:hover {
            background-color: #007bff;
            color: white;
        }

        .content {
            padding: 20px;
        }

        .nav-link {
            cursor: pointer;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">系统管理</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <span class="navbar-text">欢迎您，管理员（ <span th:text="${session.name}"></span>）</span>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="settingsDropdown" role="button"
                   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    设置
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="settingsDropdown">
                    <div>
                        <a class="dropdown-item" th:href="@{/order}">进入订单管理</a>
                        <a class="dropdown-item" th:href="@{/inventory}">进入仓库管理</a>
                    </div>
                    <a class="dropdown-item" th:href="@{/logout}">退出登录</a>
                    <a class="dropdown-item" href="#" onclick="location.reload();">刷新页面</a>
                </div>
            </li>
        </ul>
    </div>
</nav>
<div class="container-fluid">
    <div class="row">
        <nav class="col-md-2 sidebar">
            <a href="#" class="nav-link" onclick="showContent('user-query')">用户查询</a>
            <a href="#" class="nav-link" onclick="showContent('system-status')">系统运行状况</a>
            <a href="#" class="nav-link" onclick="showContent('system-settings')">系统设置</a>
        </nav>
        <main class="col-md-10 content">
            <div id="user-query" th:class="${userPage}==1? '':'hidden'">
                <h3>用户查询</h3>
                <form th:action="@{/user/list}" method="post">
                    <div class="form-group">
                        <label for="userId">用户名</label>
                        <input type="text" class="form-control" id="userId" name="userName" placeholder="按用户名查询">
                    </div>
                    <div class="form-group">
                        <label for="userRole">用户属性</label>
                        <select class="form-control" id="userRole" name="userRole">
                            <option value="">选择用户属性</option>
                            <option value="系统管理员">系统管理员</option>
                            <option value="采购员">采购员</option>
                            <option value="仓库管理员">仓库管理员</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="phone">联系方式</label>
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="按联系方式查询">
                    </div>
                    <div class="form-group">
                        <label for="nickName">昵称</label>
                        <input type="text" class="form-control" id="nickName" name="nickName" placeholder="按昵称查询">
                    </div>
                    <button type="submit" class="btn btn-primary mt-4">查询</button>
                    <button type="button" class="btn btn-success mt-4" data-bs-toggle="modal"
                            data-bs-target="#createUserModal">新建用户
                    </button>
                    <th:block th:if="${error}">
                        <p style="color: red;">用户名已存在！</p>
                    </th:block>
                    <th:block th:if="${deleteError}">
                        <p style="color: red;">不能删除自己!</p>
                    </th:block>
                </form>
                <table class="table mt-4">
                    <thead>
                    <tr>
                        <th>用户名</th>
                        <th>用户属性</th>
                        <th>昵称</th>
                        <th>联系方式</th>
                        <th>账户建立时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 假设这里有一个循环来显示查询结果 -->
                    <tr th:each="user : ${usersQuery}">
                        <td th:text="${user.getUserName()}"></td>
                        <td th:text="${user.getRole()}"></td>
                        <td th:text="${user.getNickname()}"></td>
                        <td th:text="${user.getPhone()}"></td>
                        <td th:text="${user.getCreateDate()}"></td>
                        <td>
                            <button type="button" class="btn btn-primary"
                                    th:attr="onclick='showEditUserModal(\'' + ${user.getUserName()} + '\');'">
                                修改用户
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div id="user-management" th:class="${userPage}==2? '':'hidden'">
                <h3>用户管理</h3>
                <form th:action="@{/user/update}" method="post">
                    <div class="form-group">
                        <label for="userName1">用户ID</label>
                        <input type="text" class="form-control" id="userName1" name="userName"
                               placeholder="按用户ID查询">
                    </div>
                    <div class="form-group">
                        <label for="userRole1">用户属性</label>
                        <select class="form-control" id="userRole1" name="userRole">
                            <option value="">选择用户属性</option>
                            <option value="系统管理员">系统管理员</option>
                            <option value="采购员">采购员</option>
                            <option value="仓库管理员">仓库管理员</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">查询</button>
                </form>

                <table class="table mt-4">
                    <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>用户属性</th>
                        <th>联系方式</th>
                        <th>账户建立时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 假设这里有一个循环来显示查询结果 -->
                    <tr th:each="user : ${usersManage}">
                        <td th:text="${user.getUserName()}"></td>
                        <td th:text="${user.getRole()}"></td>
                        <td th:text="${user.getPhone()}"></td>
                        <td th:text="${user.getCreateDate()}"></td>

                    </tr>
                    </tbody>
                </table>
            </div>

            <div id="system-status" th:class="${userPage}==3? '':'hidden'">
                <h3>系统运行状况</h3>
                <form th:action="@{/user/sysStatus}" method="post">
                    <button type="submit" class="btn btn-primary">查看</button>
                </form>

                <a>系统运行情况:<span th:text="${status}"></span></a><br>
                <a>数据库运行情况:<span th:text="${database}"></span></a><br>
                <a>当前磁盘空间占用:<span th:text="${disk}"></span></a><br>
                <a>当前系统出错情况详细:<span th:text="${error}"></span></a>

            </div>

            <div id="system-settings" class="hidden">
                <h3>系统设置</h3>
                <p>当前系统日志存储的路径: /var/log/system</p>
                <p>数据库备份路径: /var/backups/database</p>
                <a class="btn btn-primary" onclick="backupDatabase()">进行数据库备份</a>
            </div>
        </main>
    </div>
</div>

<!-- 新建用户弹窗 -->
<div class="modal fade" id="createUserModal" tabindex="-1" role="dialog" aria-labelledby="createUserModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createUserModalLabel">新建用户</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form th:action="@{/user/create}" method="post">
                    <div class="form-group">
                        <label for="newUserId">用户名</label>
                        <input type="text" class="form-control" id="newUserId" name="userName" required>
                    </div>
                    <div class="form-group">
                        <label for="newUserPassword">密码</label>
                        <input type="password" class="form-control" id="newUserPassword" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="newUserName">实际姓名</label>
                        <input type="text" class="form-control" id="newUserName" name="nickName" required>
                    </div>
                    <div class="form-group">
                        <label for="newUserContact">联系方式</label>
                        <input type="text" class="form-control" id="newUserContact" name="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="newUserRole">用户属性</label>
                        <select class="form-control" id="newUserRole" name="userRole" required>
                            <option value="系统管理员">系统管理员</option>
                            <option value="采购员">采购员</option>
                            <option value="仓库管理员">仓库管理员</option>
                        </select>
                    </div>
                    <div class="form-group" id="pinDiv" style="display:none;">
                        <label for="pin">PIN</label>
                        <input type="password" class="form-control" id="pin" name="pin">
                    </div>
                    <button type="submit" class="btn btn-primary">确定创建</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 修改用户弹窗 -->
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editUserModalLabel">修改用户</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form th:action="@{/user/update}" method="post">
                    <div class="form-group">
                        <label for="editUserId">用户名</label>
                        <input type="text" class="form-control" id="editUserId" name="userName" readonly>
                    </div>
                    <div class="form-group">
                        <label for="editUserPassword">密码</label>
                        <input type="password" class="form-control" id="editUserPassword" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="editUserName">昵称</label>
                        <input type="text" class="form-control" id="editUserName" name="nickName" required>
                    </div>
                    <div class="form-group">
                        <label for="editUserContact">联系方式</label>
                        <input type="text" class="form-control" id="editUserContact" name="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="editUserRole">用户属性</label>
                        <select class="form-control" id="editUserRole" name="userRole" required>
                            <option value="系统管理员">系统管理员</option>
                            <option value="采购员">采购员</option>
                            <option value="仓库管理员">仓库管理员</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary mt-3">确定修改</button>
                </form>
                <form th:action="@{/user/delete}" method="post">
                    <button type="submit" class="btn btn-danger mt-3" id="deleteUserName" name="username">删除用户
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="/js/bootstrap.bundle.js"></script>
<script>
    function showContent(id) {
        document.querySelectorAll('.content > div').forEach(function (div) {
            div.classList.add('hidden');
        });
        document.getElementById(id).classList.remove('hidden');
    }

    function showCreateUserModal() {
        document.getElementById('newUserRole').addEventListener('change', function () {
            var pinDiv = document.getElementById('pinDiv');
            if (this.value === 'super_admin') {
                pinDiv.style.display = 'block';
            } else {
                pinDiv.style.display = 'none';
            }
        });
        $('#createUserModal').modal('show');
    }

    function showEditUserModal(userName) {
        document.getElementById('editUserId').value = userName;
        document.getElementById('deleteUserName').value = userName;
        // 使用Bootstrap的API打开模态框
        var modal = new bootstrap.Modal(document.getElementById('editUserModal'));
        modal.show();
    }

    function deleteUser() {
        var userId = $('#editUserId').val();
        if (confirm('确定要删除这个用户吗？')) {
            $.ajax({
                url: '/user-management/delete-user', // 假设这是删除用户的API端点
                type: 'POST',
                data: {id: userId},
                success: function () {
                    alert('用户已成功删除');
                    location.reload(); // 重新加载页面以刷新用户列表
                },
                error: function () {
                    alert('删除用户失败');
                }
            });
        }
    }

    function backupDatabase() {
        fetch('/user/backup', {
                method: 'POST'
            }
        )
    }

    function showSystemStatusModal() {
        fetch('/user/sysStatus', {
            method: 'POST'
        })
    }
</script>
</body>
</html>
